<template>
    <div class="box">
        <p class="p">{{ title }}</p>
        <ul class="ul2">
            <li v-for="item in PeopleArr" :key="item.eid">
                <img v-for="(item2, index2) in imgArr" :src="item2" :key="index2" alt="" class="img">
                <div class="rig">
                    <p>{{ item.ename }} <span>{{ item.etel }}</span></p>
                    <p><em :class="item.status === '已完成' ? 'span' : 'span2'"></em>{{ item.status }}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { employeeList } from '../../api/index'
const PeopleArr = ref([])
employeeList()
    .then((res) => {
        PeopleArr.value = res.data.data.employee.records

    })
    .catch((err) => {
        console.log(err)
    })

const imgArr = ['https://img2.baidu.com/it/u=2749540970,2412793883&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427']
defineProps({
    title: {
        type: String,
        default: '未处理订单'
    },
    color: {
        default: 'blue'
    },
})



</script>

<style lang="less" scoped>
.box {
    display: flex;
    flex-direction: column;
    width: 350px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 5px 5px 5px #ccc;


}

.box .p {
    height: 20px;
    padding: 20px 20px 0px 24px;

}

.box .ul2 {
    flex: 1;
    overflow-y: scroll;

}

::-webkit-scrollbar {
    display: none;
}

.box .ul2 li {
    display: flex;
    margin: 40px 20px;
    font-size: 14px;
}


.rig p:nth-child(2) {
    color: #ccc;
    font-size: 12px;
    font-weight: bold;
    margin-top: 4px;
    display: flex;
    line-height: 10px;
}

.rig p:nth-child(2) b {
    width: 10px;
    height: 10px
}

.span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: green;
    margin-right: 8px;
}

.span2 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: red;
    margin-right: 8px;
}

.rig p:nth-child(1) span {
    font-size: 16px;
    margin-left: 8px
}

.img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 15px
}
</style>